{% extends 'base/base.html' %}
{% load myfilter %}
{% load myhistory %}
{% block title %}
<title>{{ ans.title }}详情页</title>
{% endblock %}
{% block css %}
<style>
.xcontainer {
    width: 1140px;
    max-width: 1140px;
    padding-top: .5rem !important;
}

</style>
{% endblock %}
{% block body %}
<div class="body_content_wrapper pb-2 mt-0">
    <div class="container xcontainer">
    <section class="bg-dark rounded-3 g-0 p-3 text-white">
        <div class="video_detail_wrapper d-flex">
            <div class="video_detail_left">
                <div class="video_detail_cover">
                    <img width="256" height="356" class="lazyload" data-original="https://cdn.aqdstatic.com:966/age/{{ ans.imglink }}" src="https://cdn.aqdstatic.com:966/age/{{ ans.imglink }}" referrerpolicy="no-referrer" style="display: inline;">
                    <div class="video_detail_collect opacity-75">
                        {% if request.user.is_authenticated and ansid|has_collected:request.user %}
                        <button id="collectBtn"  node-data-status="1" type="button" class="btn btn-sm btn-danger"><i class="bi-heart-fill"></i><span> 已收藏</span></button>
                        {% else %}
                        <button id="collectBtn"  node-data-status="0" type="button" class="btn btn-sm btn-danger"><i class="bi-heart"></i><span></span></button>
                        {% endif %}
                        {% csrf_token %}
                    </div>
                </div>
                <div class="video_detail_extra d-flex mt-2">
                    <div class="video_detail_extra_item flex-fill"><i class="bi-fire text-danger"></i> {{ ans.views }}</div>
                </div>
                <div class="video_detail_box detail_baseinfo my-2">
                    <div class="video_detail_box--bd">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title text-danger">基本信息</h5>
                                <ul class="detail_imform_list">
                                            <li><span class="detail_imform_tag">动画种类：</span><span class="detail_imform_value">{{ ans.category }}</span></li>
                                            <li><span class="detail_imform_tag">原作：</span><span class="detail_imform_value">{{ ans.author }}</span></li>
                                            <li><span class="detail_imform_tag">首播时间：</span><span class="detail_imform_value">{{ ans.pub_date }}</span></li>
                                            <li><span class="detail_imform_tag">播放状态：</span><span class="detail_imform_value">{{ ans.status }}</span></li>
                                            <li><span class="detail_imform_tag">标签：</span><span class="detail_imform_value">
                                                    {% for label in labels %}
                                                {{ label }}{% if not forloop.last %}{% endif %}
                                                    {% endfor %}
                                            </span></li>
                                            <li><span class="detail_imform_tag">官方网站：</span><span class="detail_imform_value">{{ ans.link }}</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="video_detail_right ps-3 flex-grow-1">
                <h2 class="video_detail_title">{{ ans.title }}</h2>
                <hr class="hr-gray my-2">
                <div class="video_detail_desc py-2">{{ ans.introduce }}</div>
                <div class="video_detail_playlist_wrapper pt-4">
                    <div class="video_detail_box_title text-danger">
                        <i class="bi-play-btn-fill"></i> 在线播放
                        <small class="float-end text-secondary">视频如果未正常播放或者卡顿，请切换播放源，优先选择 VIP 播放源!</small>
                    </div>
                    <hr class="hr-gray my-2">
                    <ul class="nav nav-pills" role="tablist">
                        <li class="nav-item" role="presentation"><button class="nav-link btn-sm  active " data-bs-toggle="pill" data-bs-target="#playlist-source-bilibili" type="button" aria-selected="true" role="tab"><span class="badge bg-danger">VIP</span> 播放源</button></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade  show active " id="playlist-source-tt" role="tabpanel">
                            <ul class="video_detail_episode">
                                {% csrf_token %}
                                {% for an in episodes %}
                                    <li><a href='#' class="video_detail_spisode_link" data-episode="{{ an.episode }}" data-agelink="{{ an.agelink }}">第{{ an.episode|stringformat:"02d" }}集</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="video_list_box video_detail_recommend_wrapper pt-4">
                    <div class="video_detail_box_title text-danger"><i class="bi-hand-thumbs-up-fill"></i> 相关推荐</div>
                    <hr class="hr-gray my-2">
                    <div class="video_list_box--bd">
                        <div class="row row-cols-6 g-1">
                            {% for an in random_same_anime %}
                            <div class="col g-2 position-relative">
                                <div class="video_item">
                                    <div class="video_item--image position-relative">
                                        <img referrerpolicy="no-referrer" src="https://cdn.aqdstatic.com:966/age/{{ an.imglink }}" data-original="https://cdn.aqdstatic.com:966/age/{{ an.imglink }}" class="video_thumbs lazyload d-block w-100" style="display: block;"><span class="video_item--info rounded-1 text-truncate">{{ an.episode }}集</span>
                                    </div>
                                    <div class="video_item-title text-truncate text-center py-2">
                                        <a href='{% url "main:detail" an.id %}' class="link-light text-decoration-none stretched-link">{{ an.title }}</a>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    </div>
</div>
{% endblock %}
{% block js %}
    <script>
        $(document).on('click', '.video_detail_spisode_link', function(event){
            event.preventDefault();

            const episode = $(this).data('episode');
            const agelink = $(this).data('agelink');

            $.ajax({
                url: "{% url 'main:get_video_link' %}",
                data:{
                    'agelink': agelink,
                    'episode': episode
                },
                success:function(data){
                    // 跳转到获取到的视频链接
<!--                    window.location.href = data.video_link;-->
                    // 在新空白页中打开获取到的视频链接
                        window.open(data.video_link, '_blank');
                },
                error: function(xhr, status, error) {
                    console.error("获取视频链接失败:", error);
                }
            })
        })

        $(function(){
            $("#collectBtn").click(function(){
                if("{{ request.user.id }}"=="None"){
                    location.href= "/user/login?next=/detail/{{ ansid }}"
                    return;
                }

                console.log("{{ request.user.id }}", "{{ ansid }}");

                $.ajax({
                    url: "/operate/change_collect/",
                    method: "post",
                    data:{
                        "csrfmiddlewaretoken": $("[type='hidden']").val(),
                        "anime_id": "{{ ansid }}"
                    },
                    success:function(data){
                    if(data.data.state){
                        $("#collectBtn").html('<i class="bi-heart-fill"></i><span> 已收藏</span>');
                    }
                    else{
                        $("#collectBtn").html('<i class="bi-heart"></i><span></span>');
                    }
                    }
                })
            })
        })

        $(document).ready(function(){
            $('.video_detail_spisode_link').on('click', function(event) {
                event.preventDefault(); // 阻止默认行为


                // 发送 AJAX 请求以记录观看历史
                $.ajax({
                    url: '/history/watch_anime/',
                    type: 'POST',
                    data: {
                        "csrfmiddlewaretoken": $("[type='hidden']").val(),
                        "anime_id": "{{ ansid }}"
                        
                    },
                    success: function(response) {
                        console.log('观看历史已记录！');
                    },
                    error: function(xhr, status, error) {
                        console.error('发生错误：', error);
                        alert('记录观看历史时发生错误，请重试。');
                    }
                });
            });
        })

    </script>
{% endblock %}